import React from "react"
import styles from "./myQuestionAnswer.less"
import { } from '@/services/index'
import { myQuestionAnswerIanswerListdetail,myQuestionAnswerIaskListitem,myQuestionAnswerIanswerListitem} from "@/utils/interface"
import { observer } from "mobx-react-lite"
import { useState } from "react"
import { useEffect } from "react"
import classNames from 'classnames';
import {Input,List,Pagination,Button} from 'antd';
import { AudioOutlined ,MessageOutlined,FormOutlined,DeleteOutlined} from '@ant-design/icons';
import { getmyQuestionAnswerIanswerList,getmyQuestionAnswerIanswerdetail ,getmyQuestionAnswerIaskList} from "@/services/index"
const { Search } = Input;
import {IRouteComponentProps} from "umi"


let renderlabels = (labels: string[]) => {
    return labels.map((item, index) => {
        return <span key={index}>{item}</span>
    })
}
const suffix = (
    <AudioOutlined
        style={{
            fontSize: 16,
            color: '#1890ff',
        }}
    />
);

const myQuestionAnswer: React.FC<IRouteComponentProps> = (props) => {
    //我的问题数据
    const [asklist, setasklist] = useState<myQuestionAnswerIaskListitem[]>([])
    const [asklisttotal, setasklisttotal] = useState(0)
    //我的回答
    const [asnwerlist,setasnwerlist]=useState<myQuestionAnswerIanswerListitem[]>([])
    const [answerlisttotal, setanswerlisttotal] = useState(0)
    //搜索值
    
    const [titile, settitile] = useState("")
    //请求参数
    const [params, setparams] = useState({ pageNum: 1, pageSize: 10, questionTitle: titile })
    //详细数据
    const [answerdetaillist,setanswerdetaillist]=useState({} as myQuestionAnswerIanswerListdetail)
    const [changetitle,setchangetitle]=useState(0)
    const onSearch = (v: string) => {
        settitile(v)

    }
    useEffect(() => {
        getmyQuestionAnswerIaskList(params).then(ok => {
            if(ok.code==200){
                setasklist(ok.rows)
                setasklisttotal(ok.total)
            }
        })
        getmyQuestionAnswerIanswerdetail().then(ok=>{
            setanswerdetaillist(ok.data)
        })
        getmyQuestionAnswerIanswerList(params).then(ok => {
            if(ok.code==200){
                console.log(ok.rows);
                setanswerlisttotal(ok.total)
                setasnwerlist(ok.rows)
            }
        })
    }, [])
    return <div className={styles.projectAnswer}>
       
        <section className={styles.main}>
            <section className={styles.left}>
                <div className={styles.box_tenttop}>
                    <span className={changetitle==0?"active":""} onClick={()=>{
                        setchangetitle(0)
                    }}  >我的问题</span>
                    <span className={changetitle==1?"active":""} onClick={()=>{
                        setchangetitle(1)
                    }} >我的答案</span>
                </div>
            {/*           我的问题          */}
                <div  className={changetitle==1?"activb":""}  >
                <div className={styles.box_tentmain}>
                    <div className={styles.search}>
                        <Search placeholder="搜索问题" onSearch={onSearch} style={{ width: 200 }} size="large" />
                    </div>
                   
                </div>
                <div className={styles.box_main}>
                <List className={classNames(styles.List)} itemLayout="vertical" size="large" dataSource={asklist}
                footer={

                    <Pagination current={params.pageNum} total={asklisttotal}  />
                }
                renderItem={(item, index) => (
                    <List.Item
                        className={classNames(styles.Item)}
                        key={item.answerId}
                    >
                        <ul >
                            <li > <p><span>{item.qUserName}</span><span>{item.replyTime}</span><span>实训类型:<span style={{ color: "#679cf6" }}>{item.typeNum=="1"?"实训":""}</span></span></p> <p><MessageOutlined className={classNames(styles.icon)} />{item.answerCount}</p></li>
                            <li><h2>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : null} {item.questionTitle}</h2> </li>
                            <li>{ <b>{item.questionContent}</b>} <a>查看全部</a></li>
                            <li className={classNames(styles.labels)}>
                                {item.labels.length ? renderlabels(item.labels) : null}
                            </li>
                        </ul>
                        <div>
                        <FormOutlined  style={{fontSize:"20px",color:"#679cf6",marginLeft:"5px"}} />
                        <DeleteOutlined style={{fontSize:"20px",color:"#679cf6",marginLeft:"5px"}} />
                        </div>
                    </List.Item>
                )}
            />,
                    </div>
          
                </div>
            {/*            我的答案              */}
                <div    className={changetitle==0?"activb":""} >
                <div className={styles.box_tentmain}>
                    <div className={styles.search}>
                        <Search placeholder="搜索答案" onSearch={onSearch} style={{ width: 200 }} size="large" />
                    </div>
                   
                </div>
                <div className={styles.box_main}>
                <List className={classNames(styles.List)} itemLayout="vertical" size="large" dataSource={asnwerlist}
                footer={

                    <Pagination current={params.pageNum}  total={answerlisttotal} />
                }
                renderItem={(item, index) => (
                    <List.Item
                        className={classNames(styles.Item)}
                        key={item.createTime}
                    >
                        <ul >
                            <li > <p><span>{item.qUserName}</span><span>{item.replyTime}</span><span>实训类型:<span style={{ color: "#679cf6" }}>{item.typeNum=="1"?"实训":""}</span></span></p>                         <div>
                        <FormOutlined  style={{fontSize:"20px",color:"#679cf6",marginLeft:"5px"}} />
                        <DeleteOutlined style={{fontSize:"20px",color:"#679cf6",marginLeft:"5px"}} />
                        </div></li>
                            <li><span style={{fontSize:"24px"}}> {item.replyContext}</span> </li>
                            <li>{ <b>{item.questionTitle}</b>} </li>
                            <li >
                            { <b>{item.questionContent}</b>} <a>查看全部</a>
                            </li>
                        </ul>

                    </List.Item>
                )}
            />,
                    </div>
          
                </div>
           
            </section>
            {/*       右边个人标签页       */}
            <section className={styles.right}>

                <div className={styles.rightcontent}>
                    <div className={styles.righttitle}>我的问答</div>
                    <div className={styles.rightcontentitem}><img src="http://111.203.59.61:8060/file_service/group1/M00/00/1E/rBsCHGDBf0OAAHy9AADFlwCrqKg55.jpeg" alt="" className={styles.userimg} /><span className={styles.userspan}>黄辉</span></div>
                    <div className={styles.rightcontentitem}>
                        <div className={styles.ask}>问</div>
                        <div style={{marginLeft:"10px",lineHeight:"41px"}}>提问了<span className={styles.itemspan}>{answerdetaillist.numberQuestions}</span>个问题, <span className={styles.itemspan}>{answerdetaillist.numberReplies}</span>个人进行了回答</div>
                    </div>
                    <div className={styles.rightcontentitem}>
                        <div className={styles.answer}>答</div>
                        <div style={{marginLeft:"10px"}}>回答了<span className={styles.itemspan}>{answerdetaillist.replyCount}</span>个问题</div>
                    </div>
                    </div>

        </section>
        </section>

    </div >
}

export default observer(myQuestionAnswer)